import {invoke} from "lodash-es";
import {DataGrid, GridColumn, GridColumnGroup, GridHeaderRow, LinkButton} from "rc-easyui";
import React, {useContext, useEffect, useState} from "react";
import {withCheckGrid} from "@kordar/easyui-tpl";
import {BucketContext} from "./context";
import {FormDataType} from "@kordar-lib/base";
import {tfield, tparam} from "@kordar-lib/i18n";
import SearchPanel from "./search"
import {Access} from "@kordar/easyui";
import {Link} from "react-router-dom";


let CheckGrid = withCheckGrid(DataGrid)

const Table = () => {

    const {pageConfig, fetchConfig, ctx, ctxState, refs, version} = useContext(BucketContext)
    const [key, setKey] = useState(0)

    const toolbar = () => {

        let openParam = {
            record: {name: '', remark: ''},
            type: FormDataType.CREATE,
            ctx: ctx,
            title: tparam(pageConfig, 'add.text', 'Create Dict')
        }

        return (
            <React.Fragment>
                <div>
                    <SearchPanel ctx={ctx} pageConfig={pageConfig} fetchConfig={fetchConfig}/>
                </div>
                <div style={{padding: 4}}>
                    <LinkButton plain className="k-color-success" iconCls="iconfont icon-refresh color-green"
                                onClick={() => ctx?.refresh()}>
                        {tparam(pageConfig, 'refresh.text', 'Refresh')}
                    </LinkButton>
                    <Access ctx={ctx} point="add">
                        <LinkButton plain className="k-color-success"
                                    iconCls="iconfont icon-add color-dark-green"
                                    onClick={() => invoke(refs, 'formdlg.open', openParam)}>
                            {tparam(pageConfig, 'add.text', 'Add')}
                        </LinkButton>
                    </Access>
                </div>
            </React.Fragment>
        )
    }


    const renderOperation = ({value, row, rowIndex}) => {
        let openParam = {
            record: row,
            ctx: ctx,
            type: FormDataType.UPDATE,
            title: `${tparam(pageConfig, 'update.text', 'Update: {#name}')}`.replace('{#name}', row.username)
        }

        return (
            <>
                <Access ctx={ctx} point="update">
                    <LinkButton plain onClick={() => invoke(refs, 'formdlg.open', openParam)}
                                iconCls="iconfont icon-edit color-dark-green"/>
                </Access>

                <Access ctx={ctx} point="delete">
                    <LinkButton onClick={() => ctx?.publish('remove', {conditions: [{key: "id", value: row.id}]})} plain
                                iconCls="iconfont icon-del color-red"/>
                </Access>

            </>
        )
    }

    useEffect(() => {
        setKey(key + 1)
    }, [fetchConfig])

    return (
        <>
            <CheckGrid toolbar={toolbar}
                       data={ctxState?.data}
                       loading={ctxState?.loading}
                       style={ctxState?.style}
                       idField="id"
                       selection={ctxState?.selectionValues}
                       onSelectionChange={(selections) => ctx?.tableSelectionChange(selections)}
                       ckWidth={20}
                       key={key}
            >
                {/*<GridColumn field="id" title={tfield(pageConfig, 'id.label', 'ID')} width="50px"/>*/}
                <GridColumn field="name" title={tfield(pageConfig, 'name.label', 'Name')} width="80px"
                            render={({row}) => <Link to={`/bucket/detail?id=${row.id}`}>{row.name}</Link>}
                />
                <GridColumn field="remark" title={tfield(pageConfig, 'remark.label', 'Remark')} width="80px" />
                <GridColumn field="driver" title={tfield(pageConfig, 'driver.label', 'Driver')} align="center"
                            width="80px"
                            render={({value}) => tparam(pageConfig, value+".text", value)}/>
                {/*<GridColumn field="config" title={tfield(pageConfig, 'config.label', 'Config')} width="60px"/>*/}
                <GridColumn field="create_time" title={tfield(pageConfig, 'create_time.label', 'CreateTime')}
                            width="75px"/>
                <GridColumn field="update_time" title={tfield(pageConfig, 'update_time.label', 'UpdateTime')}
                            width="75px"/>
                <GridColumnGroup frozen align="right" width="150px">
                    <GridHeaderRow>
                        <GridColumn align="center" render={renderOperation} width="150px"/>
                    </GridHeaderRow>
                </GridColumnGroup>

            </CheckGrid>
        </>
    )
}

export default Table

